<template>
    <el-form :model="form2" label-width="auto" style="max-width: 1800px;margin: auto;" :inline="true">
        <el-form-item label="单据编号：" placeholder="请输入单据编号">
            <el-input v-model="form2.documentnumber" />
        </el-form-item>
        <el-form-item label="商品信息：" placeholder="请输入条码、名称、规格、型号、颜色…">
            <el-input v-model="form2.product_name" />
        </el-form-item>
        <el-form-item label="单据日期：">
            <el-col :span="11">
                <el-date-picker v-model="form2.kdate" type="date" placeholder="开始时间" style="width: 100%" />
            </el-col>~
            <el-col :span="11">
                <el-date-picker v-model="form2.edate" placeholder="结束时间" style="width: 100%" />
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="gettableData">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
            <!-- <el-button>重置</el-button> -->
            <!-- <el-button type="primary" @click="">新增</el-button> -->

            <!-- <el-button type="primary" @click="">导出</el-button> -->
        </el-form-item>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-dropdown>
            <span v-if="queryShow == false" @click="changeQueryShow(true)" class="el-dropdown-link">
                展开<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <span v-else @click="changeQueryShow(false)" class="el-dropdown-link">
                收起<el-icon class="el-icon--right"><arrow-up /></el-icon>
            </span>
        </el-dropdown>

        <div v-show="queryShow">
            <el-form-item label="客户：">
                <el-select v-model="form2.supplierId" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in supplierList" :key="item.customerid" :label="item.customer"
                        :value="item.customerid" />
                </el-select>
            </el-form-item>
            <el-form-item label="仓库名称：">
                <el-select v-model="form2.depot_id" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in warehouseList" :key="item.depot_id" :label="item.depot_name"
                        :value="item.depot_id" />
                </el-select>
            </el-form-item>
            <el-form-item label="操作员：">
                <el-select v-model="form2.creatorId" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in userInfo" :key="item.userId" :label="item.login_name" :value="item.userId" />
                </el-select>
            </el-form-item>

            <el-form-item label="关联订单：" placeholder="请输入单据编号">
                <el-input v-model="form2.associateddocuments" />
            </el-form-item>
            <el-form-item label="结算账户：">
                <el-select v-model="form2.accountId" placeholder="请选择" style="width: 200px;">
                    <el-option v-for="item in accountList" :key="item.accountId" :label="item.name"
                        :value="item.accountId" />
                </el-select>
            </el-form-item>


            <el-form-item label="单据状态：">
                <el-select v-model="form2.status" placeholder="请选择" style="width: 200px;" clearable>
                    <el-option label="未审核" :value="false" />
                    <el-option label="已审核" :value="true" />
                </el-select>
            </el-form-item>
            <el-form-item label="单据备注：" placeholder="请输入备注">
                <el-input v-model="form2.remark" />
            </el-form-item>
            <el-button @click="DeleteRanger">删除</el-button>
            <el-button @click="getExcel">导出</el-button>
            <!--列设置-->
            <el-popover placement="right" width="300px" trigger="click">
                <template #reference>
                    <el-button style="margin-right: 16px">列设置</el-button>
                </template>
                <table>
                    <tbody>
                        <tr>
                            <td><el-checkbox label="客户" v-model="Listheading.c1" /></td>
                            <td><el-checkbox label="单据编号" v-model="Listheading.c2" /></td>
                            <td><el-checkbox label="关联单据" v-model="Listheading.c3" /></td>
                        </tr>
                        <tr>
                            <td><el-checkbox label="商品信息" v-model="Listheading.c4" /></td>
                            <td><el-checkbox label="单据日期" v-model="Listheading.c5" /></td>
                            <td><el-checkbox label="操作员" v-model="Listheading.c6" /></td>
                        </tr>
                        <tr>
                            <td><el-checkbox label="数量" v-model="Listheading.c7" /></td>
                            <td><el-checkbox label="金额合计" v-model="Listheading.c8" /></td>
                            <td><el-checkbox label="含税合计" v-model="Listheading.c9" /></td>
                        </tr>
                        <tr>
                            <td><el-checkbox label="优惠率" v-model="Listheading.c10" /></td>
                            <td><el-checkbox label="退款优惠" v-model="Listheading.c11" /></td>
                            <td><el-checkbox label="其他费用" v-model="Listheading.c12" /></td>
                        </tr>
                        <tr>
                            <td><el-checkbox label="待退金额" v-model="Listheading.c13" /></td>
                            <td><el-checkbox label="结算账户" v-model="Listheading.c14" /></td>
                            <td><el-checkbox label="本次退款" v-model="Listheading.c15" /></td>
                        </tr>
                        <tr>
                            <td><el-checkbox label="本次欠款" v-model="Listheading.c16" /></td>
                            <td><el-checkbox label="销售人员" v-model="Listheading.c17" /></td>
                            <td><el-checkbox label="备注" v-model="Listheading.c18" /></td>
                        </tr>
                        <tr>
                            <td><el-checkbox label="状态" v-model="Listheading.c19" /></td>


                        </tr>
                    </tbody>
                </table>
                <div>
                    恢复默认列配置：<el-link type="primary" @click="ResetCheckbox">恢复默认</el-link>
                </div>
            </el-popover>

        </div>
    </el-form>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="#" width="55">
            <template v-slot="scope">
                {{ scope.$index + 1 }} <!-- 自增数字，从1开始 -->
            </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
            <template #default="scope">
                <!-- <el-button type="text" @click="handleEdit()">编辑</el-button> -->
                <el-button type="text" @click="handleDelete(scope.row.salesOrdersid)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c1" prop="customer" label="客户" />
        <el-table-column v-if="Listheading.c2" prop="documentnumber" label="单据编号" />
        <el-table-column v-if="Listheading.c4" prop="product_name" label="商品信息" />
        <el-table-column v-if="Listheading.c5" prop="documentTime" label="单据日期" />
        <el-table-column v-if="Listheading.c6" prop="creatorName" label="操作员" />
        <el-table-column v-if="Listheading.c7" prop="number" label="数量" />
        <el-table-column v-if="Listheading.c8" prop="total_price" label="金额合计">
            <template #default="scope">
                {{ scope.row.total_price.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c9" prop="taxtotal" label="含税合计">
            <template #default="scope">
                {{ scope.row.taxtotal.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c13" prop="refundamount" label="待退金额">
            <template #default="scope">
                {{ scope.row.refundamount.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c15" prop="refund" label="本次退款">
            <template #default="scope">
                {{ scope.row.refund.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c16" prop="debt" label="本次欠款">
            <template #default="scope">
                {{ scope.row.debt.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c19" prop="status" label="状态">
            <template #default="scope">

                <el-tag type="danger" v-if="scope.row.status == false">未审核</el-tag>
                <el-tag type="success" v-if="scope.row.status == true">已审核</el-tag>

            </template>
        </el-table-column>
        <el-table-column v-if="Listheading.c3" prop="associateddocuments" label="关联单据" />
        <el-table-column v-if="Listheading.c10" prop="discount" label="优惠率" />
        <el-table-column v-if="Listheading.c11" prop="refundoffers" label="退款优惠" />
        <el-table-column v-if="Listheading.c12" prop="otherfees" label="其他费用" />
        <el-table-column v-if="Listheading.c14" prop="name" label="结算账户" />
        <el-table-column v-if="Listheading.c17" prop="salesName" label="销售人员" />
        <el-table-column v-if="Listheading.c18" prop="remark" label="备注" />

    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:current-page="form2.pageIndex" v-model:page-size="form2.pageSize" :page-sizes="[10, 15, 20, 30]"
        :background="false" layout="total, prev, pager, next, sizes, jumper" :total="page.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
//import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetUserInfo, GetSupplierList, GetWarehouseList, GetAccountList, GetSalesReturnShow, DeleteSalesReturn, RangeDeleteSalesReturn } from '@/api/Sales/index'
import { type DelList, type input1, type input2 } from '@/api/Sales/type'
onMounted(() => {

    gettableData()
    getuserInfo()
    getSupplierList()
    getWarehouseList()
    getAccountList()
})
//列设置绑定字段
const Listheading = reactive({
    c1: true,
    c2: true,
    c3: false,
    c4: true,
    c5: true,
    c6: true,
    c7: true,
    c8: true,
    c9: true,
    c10: false,
    c11: false,
    c12: false,
    c13: true,
    c14: false,
    c15: true,
    c16: true,
    c17: false,
    c18: false,
    c19: true,


})
//列设置恢复默认
const ResetCheckbox = () => {
    Listheading.c1 = true
    Listheading.c2 = true
    Listheading.c3 = false
    Listheading.c4 = true
    Listheading.c5 = true
    Listheading.c6 = true
    Listheading.c7 = true
    Listheading.c8 = true
    Listheading.c9 = true
    Listheading.c10 = false
    Listheading.c11 = false
    Listheading.c12 = false
    Listheading.c13 = true
    Listheading.c14 = false
    Listheading.c15 = true
    Listheading.c16 = true
    Listheading.c17 = false
    Listheading.c18 = false
    Listheading.c19 = true

}

//分页条件
const page = reactive({
    pageSize: 10,
    pageIndex: 1,
    totalCount: 0,
    totalPage: 0
})
//查询条件
const form2 = reactive({
    documentnumber: '',
    product_name: '',
    kdate: '',
    edate: '',
    supplierId: null,
    creatorId: null,
    status: "",
    remark: '',
    depot_id: null,
    associateddocuments: "",
    accountId: null,
    pageSize: page.pageSize,
    pageIndex: page.pageIndex,
})

const queryShow = ref(false)

const changeQueryShow = (val: any) => {
    queryShow.value = val
}
const handleReset = () => {
    // 重置查询条件到初始状态  
    form2.product_name = '';
    form2.documentnumber = '';
    form2.kdate = '';
    form2.edate = '';
    form2.supplierId = null;
    form2.creatorId = null;
    form2.status = '';
    form2.remark = '';
    form2.depot_id = null;
    form2.associateddocuments = '';
    form2.accountId = null;
    // 如果有更多查询条件，也需要在这里重置它们  
};


//销售退货列表
const gettableData = async () => {
    await GetSalesReturnShow(form2).then(function (res) {

        tableData.value = res.data.data;
        page.totalCount = res.data.totalCount;
        page.totalPage = res.data.totalPage
        console.log(res.data);
    })
}
//绑定操作员
const userInfo: any = ref([])
const getuserInfo = async () => {
    await GetUserInfo().then(res => {
        userInfo.value = res.data;
    })
}


//仓库列表
const warehouseList: any = ref([])
const getWarehouseList = async () => {
    await GetWarehouseList().then(res => {
        warehouseList.value = res.data;
    })
}
//账户列表
const accountList: any = ref([])
const getAccountList = async () => {
    await GetAccountList().then(res => {
        accountList.value = res.data;
    })
}


//供应商列表
const supplierList: any = ref([])
const getSupplierList = async () => {
    await GetSupplierList().then(res => {
        supplierList.value = res.data;
    })
}
//多选
const check = ref([])
const handleSelectionChange = (val: []) => {
    check.value = val
}




//更改页容量
const handleSizeChange = (val: number) => {
    page.pageSize = val;
    gettableData();
}
//跳转第几页
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    gettableData();
}



const tableData = ref([])
const multipleSelection = ref([])

//编辑
// const handleEdit = () => {

// }
//删除
const handleDelete = async (salesOrdersid: any) => {

    await DeleteSalesReturn(salesOrdersid).then(function (res) {
        if (res.data > 0) {
            ElMessage.success("删除成功");
            gettableData();
        } else {
            ElMessage.error("删除失败");
        }
    })
}

//批量删除
const niuma: any = reactive<DelList>({
    ids: []
})
const DeleteRanger = async () => {
    if (check.value.length <= 0) {
        ElMessage.error("至少选择一项");
        return;
    }
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            niuma.ids = check.value.map((ele: any) => ele.salesOrdersid);
            await RangeDeleteSalesReturn(niuma.ids).then(function (res) {
                if (res.data > 0) {
                    ElMessage.success("删除成功");
                    gettableData();
                } else {
                    ElMessage.error("删除失败");
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}

const getExcel = () => {
    location.href = "http://localhost:5184/SalesData/SalesReturnExlsx"


}






</script>